<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,ul {margin:0;padding:0;}
li {list-style:none;}
img{border:none; vertical-align:top; cursor:pointer;}
body {background:#f1f1f1;}
.pic {width:600px; height:382px;float:left;position:relative;}
span {height:30px; width:100%; line-height:30px; text-align:center; background:#666; opacity:0.3; filter:alpha(opacity=30); position:absolute;}
#span1 {top:0;}
#span2 {bottom:0;}
#tab {float:left;margin-left:20px;}
#tab li {width:50px; height:50px; border:1px solid #333; margin-bottom:10px; cursor:pointer;}
.active {background:yellow;}
</style>
<script>
window.onload = function(){
	var aSpan = document.getElementsByTagName('span');
	var oImg = document.getElementsByTagName('img')[0];
	var oUl= document.getElementById('tab');
	var aLi = oUl.getElementsByTagName('li');
	var arr = ['1.jpg','2.jpg','3.jpg','4.jpg'];
	var arr2 = ['图片1','图片2','图片3','图片4']
	var len = arr.length;
	var num = 0;
	var timer = null;
	
	for(var i=0;i<len;i++){
		oUl.innerHTML += '<li>'+'</li>';	//添加有+=，替换用=（用=就只能有一个li）
	}
	//初始化【必须放在生成了li之后】
	function fn(){
		oImg.src = arr[num];
		aSpan[0].innerHTML = num+1 + '/' + len;
		aSpan[1].innerHTML = arr2[num];
		for (var i=0;i<len;i++){
			aLi[i].className = '';
		}
		aLi[num].className = 'active';
	}
	fn();
	
	for (var i=0;i<len;i++){
		aLi[i].index = i;
		aLi[i].onclick = function(){
			num = this.index;
			fn();
			clearInterval(timer);
		}
	}
	
	timer = setInterval(function(){
		num++;
		num%=len;
		fn();
	},2000)
	
}
</script>
</head>
<body>
	<div class="pic">
    	<img src="">
      <span id="span1">数量这在加载中...</span>
      <span id="span2">信息正在加载中...</span>
  </div>
  </ul>
  <ul id="tab"></ul>
</body>
</html>